<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.filter.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
</head>
<body onload="prettyPrint();">

<h2>Filter Plugin</h2>

<p>Filtering is available by including the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/src/jquery.multiselect.filter.js">jquery.multiselect.filter.js</a> plugin and the <a href="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/master/jquery.multiselect.filter.css">jquery.multiselect.filter.css</a> CSS file.  Initialize filtering on any of your multiselects by calling <code class="prettyprint">multiselectfilter()</code> on the widget.</p>

<pre class="prettyprint">
$("select").multiselect().multiselectfilter();
</pre>

<form style="margin:20px 0">
	<p>
		<select multiple="multiple" style="width:370px">
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="blue">Blue</option>
		<option value="orange">Orange</option>
		<option value="purple">Purple</option>
		<option value="yellow">Yellow</option>
		<option value="brown">Brown</option>
		<option value="black">Black</option>
		</select>
	</p>
	<p>
		<select multiple="multiple" style="width:370px">
		<optgroup label="test">
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</optgroup>
		<optgroup label="foo">
			<option value="orange">Orange</option>
			<option value="purple">Purple</option>
			<option value="yellow">Yellow</option>
			<option value="brown">Brown</option>
			<option value="black">Black</option>
		</optgroup>
		</select>
	</p>
</form>

<h3>Options:</h3>

<p>Pass any of these as a configuration object when you initialize <code>multiselectfilter()</code>:</p>
<ul>
<li><code><strong>label</strong></code><p>The text to appear left of the input.  Defaults to &quot;Filter:&quot;</p></li>
<li><code><strong>width</strong></code><p>The width of the input in pixels.  Defaults to 100px in the style sheet, but you can override this for each instance.</p></li>
<li><code><strong>placeholder</strong></code><p>The HTML5 placeholder attribute value of the input.  Only supported in webkit as of this writing.  Defaults to &quot;Enter keywords&quot;</p></li>
<li><code><strong>autoReset</strong></code><p>A boolean value denoting whether or not to reset the search box &amp; any filtered options when the widget closes. Defaults to false.</p></li>
</ul>

<h3>Events:</h3>
<ul>
<li><code><strong>filter</strong></code>
	<p>A callback function that fires after filtering is complete.  Accepts two arguments: the original event and an array of matches.</p>
	
	<p>To do something when no matches are found:</p>
	
<pre class="prettyprint">
$("select").multiselect().multiselectfilter({
    filter: function(event, matches){
        if( !matches.length ){
            // do something
        }
    }
});
</pre>

	<p>To do something with a match:</p>
	
<pre class="prettyprint">
$("select").multiselect().multiselectfilter({
    filter: function(event, matches){
		
        // find the first matching checkbox
        var first_match = $( matches[0] );
    }
});
</pre>

	<p>You can also bind to the event after a multiselect has been initialized, like such:
	
<pre class="prettyprint">
$("select").bind("multiselectfilterfilter", function(event, matches){
    // do something
});
</pre>
	
</li>
</ul>

<h3>Methods</h3>
<p>Syntax: <code class="prettyprint">$("select").multiselectfilter("method_name");</code></p>
<ul>
<li><code><strong>updateCache</strong></code><p>Reloads the cache of values to search against.  Make sure you call this after dynamically adding or removing any inputs to the multiselect.</p></li>
<li><code><strong>destroy</strong></code><p>Destroys the widget.</p></li>
<li><code><strong>widget</strong></code><p>Returns the wrapper div with the input and label text inside.  This is a quick and easy way to access the HTML created by the plugin.</p></li>
</ul>

<script type="text/javascript">
$("select").multiselect().multiselectfilter();
</script>

</body>
</html>
